<template>
  <div id="grade" style="display:flex;flex-grow:1;height: 100%">
    <el-row :gutter="20" style="height:100%; width: 100%">
      <el-col :span="6" style="height:100%">
        <el-card style="height:100%">
          <div class="tree">
            <el-tree
              :data="organization"
              default-expand-all
              ref="tree"
              node-key="id"
              :expand-on-click-node="false"
              :props="classTreeNode"
            ></el-tree>
            <!--:render-content="renderContent"-->
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" style="height:100%">
        <el-card style="height:100%">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="班级管理" name="first">
              <div>
                <el-row>
                  <el-col :span="2">
                    <el-button @click="handleQuery" type="primary" plain>查询</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button @clice="handleNew" type="primary" plain>新增</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="primary" plain>导入</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="primary" plain>重置</el-button>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px">
                  <el-col :span="2" style="margin-top: 10px">
                    <span>班级名称:</span>
                  </el-col>
                  <el-col :span="6">
                    <el-input v-model="queryData.clazz" placeholder="请输入班级名称" style="width: 200px"></el-input>
                  </el-col>
                  <el-col :span="3" style="margin-top: 10px">
                    <span>班主任名称:</span>
                  </el-col>
                  <el-col :span="6">
                    <el-input placeholder="请输入班主任名称" style="width: 200px"></el-input>
                  </el-col>
                </el-row>
                <el-table
                  ref="multipleTable"
                  v-loading="loading"
                  :data="pageInfo.list"
                  tooltip-effect="dark"
                  :max-height= tableMaxHeight
                  style="
                    width: 100%;
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <!--@selection-change="handleSelectionChange"-->
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="clazzName" label="班级名称"></el-table-column>
                  <el-table-column prop label="年级名称"></el-table-column>
                  <el-table-column prop="school" label="学校名称"></el-table-column>
                  <el-table-column prop="studentName" label="班主任姓名"></el-table-column>
                  <el-table-column prop label="班主任手机号码"></el-table-column>
                  <el-table-column prop label="创建时间"></el-table-column>
                  <el-table-column align="center" fixed="right" label="操作" width="150px">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="dialogVisible = true">编辑</el-button>
                      <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                      <el-button type="text" size="small">课程表</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNum"
                    :page-size="pageInfo.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pageInfo.total"
                  ></el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="年级管理" name="second"></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {queryClazz, deleteClazz, organizationClazz} from "@/api/xiaowu"
export default {
  name: "Grade",
  //组件创建
  created() {},
  mounted() {
    this.getList();
    /**监听页面高度 */
    window.onresize = () => {
      this.changeTableMaxHeight()
    }
    this.changeTableMaxHeight()
  },
  destroyed () {
    window.onresize = null
  },
  data() {
    return {
      //详细信息弹窗可见性
      dialogVisible: false,
      //新增学生弹窗可见性
      dialognewVisible: false,
      //获取详细信息的行数
      row: "",
      // 遮罩层
      loading: false,
      //树状图变量名
      classTreeNode:{
        label: "clazzName",
        children: "chirldren"
      },
      //搜索数据
      queryData: {
        clazz: "",
        grade: "",
        school: "",
        pageSize: "5",
        pageNum: "1",
      },
      //新增数据
      //表格数据
      pageInfo: {},
      //树状图数据
      organization: [],
      //删除请求参数
      selectArr: [],
      // 激活的tab名称
      activeName: 'first',
      //获取页面高度
      tableMaxHeight: 500,
    };
  },
  methods: {
    /**查询班级/年级记录列表 */
    getList() {
      this.loading = true;
      queryClazz(this.queryData).then((response) => {
        this.pageInfo = response.data.pageInfo;
        this.loading = false;
      });
      organizationClazz(this.queryData).then((response) => {
        this.organization = response.data.organization;
        this.loading = false;
      });
    },
    /**Tab点击事件 */
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**查询记录 */
    handleQuery() {
      console.log(this.queryData);
      this.getList();
      this.$message.success("查询成功");
    },
    /**新增班级弹窗可见性 */
    handleNew() {
      this.dialognewVisible = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除班级"' + row.clazzName + '"的记录?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          console.log(row.id);
          return deleteClazz(row.id);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    /**返回复选框数据 */
    selectionChange(val){
      this.selectArr = [];
      console.log('val',val);
      val.map((item) => {
        this.selectArr.push(item.id)
      })
      // this.selectArr = val;
      console.log("selectArr",this.selectArr);
    },
    /**批量删除 */
    deleteSelectionChange(){
      console.log("selectArr",this.selectArr);
      this.getList();
    },
    /**获取网页高度 */
    showFilterForm () {
      this.filterActive = !this.filterActive
      this.changeTableMaxHeight()
    },

    changeTableMaxHeight () {
      let height = document.body.offsetHeight // 网页可视区域高度
      if (this.filterActive) {
        this.tableMaxHeight = height - 300
      } else {
        this.tableMaxHeight = height - 320
      }
      console.log(this.tableMaxHeight)
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
